<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>iconfont Demo</title>
    <link href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
          rel="shortcut icon"
          type="image/x-icon"/>
    <link href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" rel="icon"
          type="image/svg+xml"/>
    <link href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" rel="stylesheet">
    <link href="demo.css" rel="stylesheet">
    <link href="iconfont.css" rel="stylesheet">
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
        .main .logo {
            margin-top: 0;
            height: auto;
        }

        .main .logo a {
            display: flex;
            align-items: center;
        }

        .main .logo .sub-title {
            margin-left: 0.5em;
            font-size: 22px;
            color: #fff;
            background: linear-gradient(-45deg, #3967FF, #B500FE);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
<div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" target="_blank" title="iconfont 首页">
        <img src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
             width="200">

        <span class="sub-title">彩色字体</span>

    </a></h1>
    <div class="nav-tabs">
        <ul class="dib-box" id="tabs">
            <li class="dib active"><span>Unicode</span></li>
            <li class="dib"><span>Font class</span></li>
            <li class="dib"><span>Symbol</span></li>
        </ul>

        <a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4601680"
           target="_blank">查看项目</a>

    </div>
    <div class="tab-container">
        <div class="content unicode" style="display: block;">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon smart-icons">&#xe663;</span>
                    <div class="name">系统监控</div>
                    <div class="code-name">&amp;#xe663;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xecd1;</span>
                    <div class="name">swagger</div>
                    <div class="code-name">&amp;#xecd1;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe61b;</span>
                    <div class="name">Nacos</div>
                    <div class="code-name">&amp;#xe61b;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe602;</span>
                    <div class="name">表情</div>
                    <div class="code-name">&amp;#xe602;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe649;</span>
                    <div class="name">招聘流程</div>
                    <div class="code-name">&amp;#xe649;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe647;</span>
                    <div class="name">招聘</div>
                    <div class="code-name">&amp;#xe647;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe658;</span>
                    <div class="name">岗位</div>
                    <div class="code-name">&amp;#xe658;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe722;</span>
                    <div class="name">岗位分类</div>
                    <div class="code-name">&amp;#xe722;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe60b;</span>
                    <div class="name">资讯</div>
                    <div class="code-name">&amp;#xe60b;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe6a5;</span>
                    <div class="name">在线状态</div>
                    <div class="code-name">&amp;#xe6a5;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe610;</span>
                    <div class="name">门店</div>
                    <div class="code-name">&amp;#xe610;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe638;</span>
                    <div class="name">口味</div>
                    <div class="code-name">&amp;#xe638;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe64c;</span>
                    <div class="name">菜品</div>
                    <div class="code-name">&amp;#xe64c;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe624;</span>
                    <div class="name">22_菜品分类</div>
                    <div class="code-name">&amp;#xe624;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe7d0;</span>
                    <div class="name">上涨</div>
                    <div class="code-name">&amp;#xe7d0;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe623;</span>
                    <div class="name">练习</div>
                    <div class="code-name">&amp;#xe623;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe604;</span>
                    <div class="name">题库管理管理</div>
                    <div class="code-name">&amp;#xe604;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe666;</span>
                    <div class="name">试题管理</div>
                    <div class="code-name">&amp;#xe666;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe601;</span>
                    <div class="name">考试管理</div>
                    <div class="code-name">&amp;#xe601;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe62b;</span>
                    <div class="name">课次</div>
                    <div class="code-name">&amp;#xe62b;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe6d0;</span>
                    <div class="name">文件资源管理</div>
                    <div class="code-name">&amp;#xe6d0;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe625;</span>
                    <div class="name">静态资源</div>
                    <div class="code-name">&amp;#xe625;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe627;</span>
                    <div class="name">教学教育</div>
                    <div class="code-name">&amp;#xe627;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe609;</span>
                    <div class="name">课程</div>
                    <div class="code-name">&amp;#xe609;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe63c;</span>
                    <div class="name">科目管理</div>
                    <div class="code-name">&amp;#xe63c;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe600;</span>
                    <div class="name">系统管理</div>
                    <div class="code-name">&amp;#xe600;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe622;</span>
                    <div class="name">用户管理</div>
                    <div class="code-name">&amp;#xe622;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe607;</span>
                    <div class="name">角色管理</div>
                    <div class="code-name">&amp;#xe607;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe713;</span>
                    <div class="name">权限管理</div>
                    <div class="code-name">&amp;#xe713;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe60a;</span>
                    <div class="name">资源管理</div>
                    <div class="code-name">&amp;#xe60a;</div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="unicode-">Unicode 引用</h2>
                <hr>

                <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                <ul>
                    <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                    <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
                </ul>
                <blockquote>
                    <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                        引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
                </blockquote>
                <p>Unicode 使用步骤如下：</p>
                <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                <pre><code class="language-css"
                >@font-face {
  font-family: 'smart-icons';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1739080127098') format('woff'),
       url('iconfont.ttf?t=1739080127098') format('truetype');
}
</code></pre>
                <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                <pre><code class="language-css"
                >.smart-icons {
  font-family: "smart-icons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                <pre>
<code class="language-html"
>&lt;span class="smart-icons"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                <blockquote>
                    <p>"smart-icons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
        </div>
        <div class="content font-class">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon smart-icons smart-village-xitongjiankong"></span>
                    <div class="name">
                        系统监控
                    </div>
                    <div class="code-name">.smart-village-xitongjiankong
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-swagger"></span>
                    <div class="name">
                        swagger
                    </div>
                    <div class="code-name">.smart-village-swagger
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-Nacos"></span>
                    <div class="name">
                        Nacos
                    </div>
                    <div class="code-name">.smart-village-Nacos
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-biaoqing"></span>
                    <div class="name">
                        表情
                    </div>
                    <div class="code-name">.smart-village-biaoqing
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zhaopinliucheng"></span>
                    <div class="name">
                        招聘流程
                    </div>
                    <div class="code-name">.smart-village-zhaopinliucheng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zhaopin"></span>
                    <div class="name">
                        招聘
                    </div>
                    <div class="code-name">.smart-village-zhaopin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-gangwei"></span>
                    <div class="name">
                        岗位
                    </div>
                    <div class="code-name">.smart-village-gangwei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-gangweifenlei"></span>
                    <div class="name">
                        岗位分类
                    </div>
                    <div class="code-name">.smart-village-gangweifenlei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zixun"></span>
                    <div class="name">
                        资讯
                    </div>
                    <div class="code-name">.smart-village-zixun
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zaixianzhuangtai"></span>
                    <div class="name">
                        在线状态
                    </div>
                    <div class="code-name">.smart-village-zaixianzhuangtai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-mendian"></span>
                    <div class="name">
                        门店
                    </div>
                    <div class="code-name">.smart-village-mendian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kouwei"></span>
                    <div class="name">
                        口味
                    </div>
                    <div class="code-name">.smart-village-kouwei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-caipin"></span>
                    <div class="name">
                        菜品
                    </div>
                    <div class="code-name">.smart-village-caipin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-22_caipinfenlei"></span>
                    <div class="name">
                        22_菜品分类
                    </div>
                    <div class="code-name">.smart-village-22_caipinfenlei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-shangzhang"></span>
                    <div class="name">
                        上涨
                    </div>
                    <div class="code-name">.smart-village-shangzhang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-lianxi"></span>
                    <div class="name">
                        练习
                    </div>
                    <div class="code-name">.smart-village-lianxi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-tikuguanliguanli"></span>
                    <div class="name">
                        题库管理管理
                    </div>
                    <div class="code-name">.smart-village-tikuguanliguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-shitiguanli"></span>
                    <div class="name">
                        试题管理
                    </div>
                    <div class="code-name">.smart-village-shitiguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kaoshiguanli"></span>
                    <div class="name">
                        考试管理
                    </div>
                    <div class="code-name">.smart-village-kaoshiguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-keci"></span>
                    <div class="name">
                        课次
                    </div>
                    <div class="code-name">.smart-village-keci
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-wenjianziyuanguanli"></span>
                    <div class="name">
                        文件资源管理
                    </div>
                    <div class="code-name">.smart-village-wenjianziyuanguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-jingtaiziyuan"></span>
                    <div class="name">
                        静态资源
                    </div>
                    <div class="code-name">.smart-village-jingtaiziyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-jiaoxuejiaoyu"></span>
                    <div class="name">
                        教学教育
                    </div>
                    <div class="code-name">.smart-village-jiaoxuejiaoyu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kecheng"></span>
                    <div class="name">
                        课程
                    </div>
                    <div class="code-name">.smart-village-kecheng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kemuguanli-"></span>
                    <div class="name">
                        科目管理
                    </div>
                    <div class="code-name">.smart-village-kemuguanli-
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-xitongguanli"></span>
                    <div class="name">
                        系统管理
                    </div>
                    <div class="code-name">.smart-village-xitongguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-yonghuguanli"></span>
                    <div class="name">
                        用户管理
                    </div>
                    <div class="code-name">.smart-village-yonghuguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-jiaoseguanli"></span>
                    <div class="name">
                        角色管理
                    </div>
                    <div class="code-name">.smart-village-jiaoseguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-quanxianguanli"></span>
                    <div class="name">
                        权限管理
                    </div>
                    <div class="code-name">.smart-village-quanxianguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-ziyuanguanli"></span>
                    <div class="name">
                        资源管理
                    </div>
                    <div class="code-name">.smart-village-ziyuanguanli
                    </div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="font-class-">font-class 引用</h2>
                <hr>

                <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
                <p>与 Unicode 使用方式相比，具有如下特点：</p>
                <ul>
                    <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                    <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
                </ul>
                <p>使用步骤如下：</p>
                <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                <pre><code class="language-html">&lt;span class="smart-icons smart-village-xxx"&gt;&lt;/span&gt;
</code></pre>
                <blockquote>
                    <p>"
                        smart-icons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
        </div>
        <div class="content symbol">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-xitongjiankong"></use>
                    </svg>
                    <div class="name">系统监控</div>
                    <div class="code-name">#smart-village-xitongjiankong</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-swagger"></use>
                    </svg>
                    <div class="name">swagger</div>
                    <div class="code-name">#smart-village-swagger</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-Nacos"></use>
                    </svg>
                    <div class="name">Nacos</div>
                    <div class="code-name">#smart-village-Nacos</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="code-name">#smart-village-biaoqing</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zhaopinliucheng"></use>
                    </svg>
                    <div class="name">招聘流程</div>
                    <div class="code-name">#smart-village-zhaopinliucheng</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zhaopin"></use>
                    </svg>
                    <div class="name">招聘</div>
                    <div class="code-name">#smart-village-zhaopin</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-gangwei"></use>
                    </svg>
                    <div class="name">岗位</div>
                    <div class="code-name">#smart-village-gangwei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-gangweifenlei"></use>
                    </svg>
                    <div class="name">岗位分类</div>
                    <div class="code-name">#smart-village-gangweifenlei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zixun"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="code-name">#smart-village-zixun</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zaixianzhuangtai"></use>
                    </svg>
                    <div class="name">在线状态</div>
                    <div class="code-name">#smart-village-zaixianzhuangtai</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-mendian"></use>
                    </svg>
                    <div class="name">门店</div>
                    <div class="code-name">#smart-village-mendian</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kouwei"></use>
                    </svg>
                    <div class="name">口味</div>
                    <div class="code-name">#smart-village-kouwei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-caipin"></use>
                    </svg>
                    <div class="name">菜品</div>
                    <div class="code-name">#smart-village-caipin</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-22_caipinfenlei"></use>
                    </svg>
                    <div class="name">22_菜品分类</div>
                    <div class="code-name">#smart-village-22_caipinfenlei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-shangzhang"></use>
                    </svg>
                    <div class="name">上涨</div>
                    <div class="code-name">#smart-village-shangzhang</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-lianxi"></use>
                    </svg>
                    <div class="name">练习</div>
                    <div class="code-name">#smart-village-lianxi</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-tikuguanliguanli"></use>
                    </svg>
                    <div class="name">题库管理管理</div>
                    <div class="code-name">#smart-village-tikuguanliguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-shitiguanli"></use>
                    </svg>
                    <div class="name">试题管理</div>
                    <div class="code-name">#smart-village-shitiguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kaoshiguanli"></use>
                    </svg>
                    <div class="name">考试管理</div>
                    <div class="code-name">#smart-village-kaoshiguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-keci"></use>
                    </svg>
                    <div class="name">课次</div>
                    <div class="code-name">#smart-village-keci</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-wenjianziyuanguanli"></use>
                    </svg>
                    <div class="name">文件资源管理</div>
                    <div class="code-name">#smart-village-wenjianziyuanguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-jingtaiziyuan"></use>
                    </svg>
                    <div class="name">静态资源</div>
                    <div class="code-name">#smart-village-jingtaiziyuan</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-jiaoxuejiaoyu"></use>
                    </svg>
                    <div class="name">教学教育</div>
                    <div class="code-name">#smart-village-jiaoxuejiaoyu</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kecheng"></use>
                    </svg>
                    <div class="name">课程</div>
                    <div class="code-name">#smart-village-kecheng</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kemuguanli-"></use>
                    </svg>
                    <div class="name">科目管理</div>
                    <div class="code-name">#smart-village-kemuguanli-</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-xitongguanli"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="code-name">#smart-village-xitongguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-yonghuguanli"></use>
                    </svg>
                    <div class="name">用户管理</div>
                    <div class="code-name">#smart-village-yonghuguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-jiaoseguanli"></use>
                    </svg>
                    <div class="name">角色管理</div>
                    <div class="code-name">#smart-village-jiaoseguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-quanxianguanli"></use>
                    </svg>
                    <div class="name">权限管理</div>
                    <div class="code-name">#smart-village-quanxianguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-ziyuanguanli"></use>
                    </svg>
                    <div class="name">资源管理</div>
                    <div class="code-name">#smart-village-ziyuanguanli</div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="symbol-">Symbol 引用</h2>
                <hr>

                <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
                    这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
                <ul>
                    <li>支持多色图标了，不再受单色限制。</li>
                    <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
                    <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                    <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                </ul>
                <p>使用步骤如下：</p>
                <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function () {
        $('.tab-container .content:first').show()

        $('#tabs li').click(function (e) {
          var tabContent = $('.tab-container .content')
          var index = $(this).index()

          if ($(this).hasClass('active')) {
            return
          } else {
            $('#tabs li').removeClass('active')
            $(this).addClass('active')

            tabContent.hide().eq(index).fadeIn()
          }
        })
      })
</script>
</body>
</html>
